<script>
import { getIndex, getGroupId } from "@/api/home.js";

export default {
  data() {
    return {
      x: 500,
      y: 650,
      id: "",
      cardtoplist: [],
      classList: [],
      bannerList: [],
      productCategoryList: [],
      qId: "",
      dataImId: "64405815494",
    };
  },
  async onLoad() {
    await Promise.all([
      this.goodsIndex(),
      this.getGroupId()
    ])
  },
  methods: {
    getGroupId() {
      getGroupId().then((res) => {
        this.qId = res.data.group_id;
      });
    },
    goodsIndex() {
      getIndex().then((res) => {
        this.bannerList = res.data.banner;
        this.productCategoryList = res.data.productCategory;
        this.cardtoplist = res.data.serviceLabel;
        this.classList = res.data.showProduct;
      });
    },
    goDetails(id) {
      uni.navigateTo({
        url: "/pages/details/details?id=" + id,
      });
    },
    onChange(e) {
      this.x = e.detail.x
      this.y = e.detail.y
    },
  },
};
</script>

<template>
  <movable-area style="width: 100%; height: 100%">
    <movable-view :x="x" :y="y" direction="all" @change="onChange" style="z-index: 999; ">
      <view>
        <view class="lxkf">
          <button @error="onimError" :data-im-id="dataImId" open-type="im"></button>
          <image src="@/static/image/my/lxkf.png" mode=""></image>
        </view>
      </view>
    </movable-view>
    <view class="content" style="z-index: 0;">
      <view class="navbar">
        <swiper :indicator-dots="true" circular="true" :autoplay="true" indicator-active-color="#ff8104"
          class="bswiper">
          <swiper-item v-for="item in bannerList" :key="item.id">
            <image :src="item.image" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </view>

      <view class="card">
        <view class="cardtop">
          <view class="indrouce" v-for="item in cardtoplist" :key="item.id">
            <image :src="item.image" mode="scaleToFill" />
            <view class="indoucetext">{{ item.title }}</view>
          </view>
        </view>
        <view class="category">
          <navigator class="category-item" hover-class="none" :url="`/pages/classfiction/classfiction?id=${item.id}`"
            v-for="item in productCategoryList" :key="item.id">
            <image class="icon" :src="item.image"></image>
            <text class="text">{{ item.title }}</text>
          </navigator>
        </view>
        <view class="come">
          <image src="@/static/image/home/zb_gift.png" mode="scaleToFill" />
          <text>加群即享 </text>
          <text>大额券包+优质福利</text>
          <text>立即加入</text>
          <button open-type="joinGroup" class="button" :group-id="qId"></button>
        </view>
        <view class="recommend">
          <view class="hot">爆品推荐</view>
          <view class="classification" :style="{ background: item.bgcolor }" v-for="item in classList" :key="item.id">
            <view class="introduce">
              <text>{{ item.title }}</text>
              <view class="title">
                <image :src="item.image" mode="aspectFit" />
              </view>
            </view>
            <scroll-view class="scroll" scroll-x>
              <view class="scrolla">
                <view class="details" @click="goDetails(itema.id)" v-for="itema in item.product_list" :key="itema.id">
                  <image :src="itema.image_list.url" mode="scaleToFill" />
                  <view class="detailsTile">{{ itema.product_name }}</view>
                  <view class="detailsprice">
                    <view class="orginPrice">￥{{ itema.origin_amount }}</view>
                    <image src="@/static/image/home/redp.png" mode="scaleToFill" />
                    <view class="nowPrice">￥{{ itema.actual_amount }}</view>
                  </view>
                </view>
              </view>

            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </movable-area>
</template>

<style lang="scss">
.lxkf {
  position: relative;
  opacity: 0.9;

  button::after {
    border: none;
    background-color: none;
  }

  button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  image {
    width: 180rpx;
    height: 160rpx;
    margin-top: 16rpx;
  }
}

.navbar {
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;

  .bswiper {
    height: 620rpx;
  }

  image {
    width: 100%;
    height: 620rpx;
  }
}

.card {
  background-color: #ffffff;
  border-radius: 24rpx;
  position: relative;
  top: -50rpx;
  z-index: 111;
  padding: 30rpx;

  .cardtop {
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .indrouce {
      display: flex;
      align-items: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }

      .indoucetext {
        margin-left: 15rpx;
        font-family: Source Han Sans CN;
        font-size: 24rpx;
        color: #81858d;
      }
    }
  }

  .category {
    margin: 26rpx 0 0;
    padding: 10rpx 0;
    display: flex;
    flex-wrap: wrap;

    .category-item {
      margin-bottom: 44rpx;
      width: 25%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .icon {
        width: 120rpx;
        height: 120rpx;
      }

      .text {
        font-size: 26rpx;
        color: #333333;
        letter-spacing: 2rpx;
        font-weight: bold;
      }
    }
  }

  .come {
    button::after {
      border: none;
      background-color: none;
    }

    button {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: inherit;
      z-index: 99999;
    }

    width: 100%;
    background: linear-gradient(127deg,
      #fbc588 0%,
      #ffebc8 28.000000000000004%,
      #fbc588 70%);
    border-radius: 52rpx;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 110rpx;
    margin-top: 10rpx;
    position: relative;

    image {
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      left: 0;
    }

    text:nth-child(2) {
      font-family: Source Han Sans CN;
      font-size: 26rpx;
      color: #8a550e;
      position: absolute;
      left: 100rpx;
      top: 40rpx;
      letter-spacing: 2rpx;
    }

    text:nth-child(3) {
      font-family: Source Han Sans CN;
      font-size: 28rpx;
      color: #e24907;
      position: absolute;
      right: 29%;
      top: 36rpx;
      letter-spacing: 4rpx;
    }

    text:nth-child(4) {
      font-family: Source Han Sans CN;
      font-weight: 800;
      font-size: 34rpx;
      color: #8a550e;
      position: absolute;
      right: 32rpx;
      top: 32rpx;
      letter-spacing: 4rpx;
    }
  }

  .recommend {
    width: 100%;
    height: 1000rpx;
    margin-top: 30rpx;
    background-color: #fef6f1;

    .hot {
      font-family: DOUYU;
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
      padding: 36rpx 15rpx;
    }

    .classification {
      padding: 10rpx;
      border-radius: 30rpx;
      background-color: #ffa981;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;

      .introduce {
        height: 100%;
        width: 27%;
        text-align: center;

        text {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 30rpx;
          color: #512813;
        }

        image {
          width: 100%;
          height: 176rpx;
          margin-top: 38rpx;
        }
      }

      .scroll {
        width: 72%;
        background-color: #f9f8fb;
        border-radius: 20rpx;

        .scrolla {
          display: flex;
          padding: 12rpx;

          .details {
            padding-right: 20rpx;

            image {
              width: 160rpx;
              height: 160rpx;
            }

            .detailsprice {
              width: 160rpx;
              height: 40rpx;
              position: relative;
              background-color: #eaeaeb;
              border-radius: 20rpx;
              margin-top: 8rpx;
              color: #7a7a7a;

              .orginPrice {
                font-size: 19rpx;
                position: absolute;
                top: 8rpx;
                left: 8rpx;
                text-decoration-line: line-through;
              }

              image {
                width: 160rpx;
                height: 40rpx;
              }

              .nowPrice {
                color: #ffffff;
                position: absolute;
                font-size: 23rpx;
                right: 16rpx;
                top: 6rpx;
              }
            }

            .detailsTile {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 160rpx;
            }
          }
        }

      }
    }
  }
}
</style>
